<template>
	<view class="income">
		<view class="search">
			<u-input
				placeholder="搜索交易号"
				prefixIcon="search"
				v-model="transaction"
			  shape="circle"
				prefixIconStyle="font-size: 22px;color: #909399"
				@change="input"
			></u-input>
			<!-- <uni-easyinput
				prefixIcon="search"
				v-model="transaction"
				placeholder="搜索交易号"
				@input="input"
			></uni-easyinput> -->
		</view>
		<view class="select" @click="toggle('bottom')">
			<text>{{ timeText }}</text>
			<uni-icons type="down" size="14"></uni-icons>
		</view>
		<view class="order-list" style="padding-bottom: 100rpx;" v-if="incomeList.length > 0">
			<view class="order-item" v-for="(item, index) in incomeList" :key="index">
				<view class="order-top">
					<view class="top-left"@click="copyOrder(item.trade_no)">交易号：{{ item.trade_no }}</view>
					<!-- <view class="top-right">{{ item.state.text }}</view> -->
				</view>
				<view class="order-line"></view>
				<view class="order-center">
					<view class="center-prev">
						<view class="center-text">{{ item.trade_remarks }}</view>
						<view class="center-btn">{{ item.trade_type.text }}</view>
					</view>
					<view class="center-amount">
						<text>{{item.budget_type.val === 0 ? '-' : '+'}}</text>
						<text>￥{{ parseFloat(item.trade_money).toFixed(2) || '0.00' }}</text>
					</view>
				</view>
				<view class="order-line"></view>
				<view class="order-bottom">
					<view class="time">{{ item.trade_date }}</view>
				</view>
			</view>
		</view>
		
		<view v-else class="nodata">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
		
		<uni-popup ref="popup" background-color="#fff" border-radius="16rpx 16rpx 0 0">
			<view class="popup-content">
				<view class="order-type">
					<view class="type-text">下单时间</view>
					<view class="type-list">
						<view
							class="type-item"
							v-for="(item,index) in timeList"
							:key="index"
							:class="{ active: timeType === index }"
							@click="selecTime(item, index)"
						>{{ item.text }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getIncomeList } from '@/api/order.js'
	 export default {
		 data() {
			 return {
				 transaction: '',
				 incomeList: [],
				 timeType: null,
				 timeList: [
					 { text: '全部', time: null }, { text: '近三天', time: 1}, { text: '近一周', time: 2},
					 { text: '近一个月', time: 3}, { text: '近三月', time: 4}, { text: '近半年', time: 5},
				 ],
				 tradeType: '',
				 time: null,
				 timeText: '全部',
				 page: 1,
				 limit: 100
			 }
		 },
		 onShow() {
		 	this.getList()
		 },
		 onPullDownRefresh(){
			this.page = 1
		 	this.getList()
		 	setTimeout(() => {
		 		uni.stopPullDownRefresh()
		 	}, 1000);
		 },
		 methods: {
			 input() {
				 console.log(' 输入框', this.transaction)
				 this.getList()
			 },
			 getList() {
				 uni.showLoading({
				 	title: '正在加载中...'
				 })
				 let param = {
					 trade_type: this.tradeType,
					 time: this.time,
					 keyword: this.transaction,
					 page: this.page,
					 limit: this.limit
				 }
				getIncomeList(param).then(res => {
					console.log('res', res)
					const {code, data } = res;
					if(code && code !=200) {
						uni.showToast({
							title:'未知错误('+code+')',
							icon:'none',
							duration:5000
						})
						uni.hideLoading()
					} else {
						this.incomeList = data.data;
						uni.hideLoading()
					}
				})
			 },
			 toggle(type) {
			 	console.log('type', type, this.$refs.popup)
			 	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			 	this.$refs.popup.open(type)
			 },
			 selecTime(item,index) {
				 this.timeType = index;
				 this.time = item.time;
				 this.timeText = item.text;
				 this.getList();
				 this.$refs.popup.close();
			 },
			 // 复制订单号
			 copyOrder(order) {
			 	uni.setClipboardData({
			 		data: order,
			 		success: () => {
			 			uni.showToast({
			 				title: '复制成功',
			 				icon: 'success',
			 				duration: 2000
			 			});
			 		},
			 		fail: () => {
			 			uni.showToast({
			 				title: '复制失败',
			 				icon: 'none',
			 				duration: 2000
			 			});
			 		}
			 	});
			 },
		 }
	 }
</script>

<style lang="scss" scoped>
	.income {
		margin: 20rpx 36rpx;
	}
	.select {
		margin-top: 60rpx;
		font-size: #{$text-size};
	}
	.order-item {
		background: #fff;
		border-radius: 16rpx;
		padding:10rpx 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		.order-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			line-height: 36rpx;
			.top-left {
				font-size: 24rpx;
				color: #999;
			}
			.top-right {
				font-size: 24rpx;
				color: #ff6005;
			}
		}
		.order-center {
		  // margin-top: 40rpx;
			height: 80rpx;
		  display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			.center-prev {
				display: flex;
				align-items: center;
				.center-text {
					max-width: 450rpx;
				}
				.center-btn {
					margin-left: 20rpx;
					background: #333;
					color: #fff;
					border-radius: 20rpx;
					font-size: 20rpx;
					padding: 2rpx 16rpx;
					text-align: center;
					box-sizing: border-box;
					white-space: nowrap;
				}
			}
		}
		.order-bottom {
			// margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
			height: 80rpx;
			.time {
				float: right;
				// margin-left: 60%;
				line-height: 80rpx;
			}
		}
		.order-line {
			border-bottom: 1px solid #f5f5f5;
			// margin-top: 20rpx;
		}
	}
	.popup-content {
		padding: 15px;
		height:100%;
		background-color: #fff;
		border-radius: 20rpx;
		.order-type {
			.type-text {
				font-size: #{$one-title-size};
			}
			.type-list {
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap;
			}
			.type-item {
				flex: 0 0 auto;
				border: 1px solid #999;
				border-radius: 30rpx;
				padding: 0 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #999;
				margin: 20rpx 10rpx;
			}
			// .type-item:last-child:not(.item:nth-child(5n)) {
			//   margin-right: 0;
			// }
		}
		.popup-btn {
			display: flex;
			margin-top: 40rpx;
			.confirm-btn {
				border-radius: 30rpx;
				background: #ff6005;
				color: #fff;
				font-size: 32rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
			.cancle-btn {
				border-radius: 30rpx;
				background: #fff;
				color: #ff6005;
				font-size: 32rpx;
				border: 1px solid #ff6005;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
	::v-deep .u-input--radius, .u-input--square {
	  border-radius: 20px;
	}
	::v-deep .is-input-border {
		border-radius: 20px;
		font-size: #{$text-size}
	}
	
	::v-deep .u-input--circle {
		background: #fff;
	}
	.active {
		background: #fff !important;
		color: #ff6005 !important;
		border: 1px solid #ff6005 !important;
	}
</style>